<template>
  <div class="search">
    <div class="item" v-for="item in searchItems">
        <div>
            {{ item.label }}:
        </div>
        <el-select 
            ref="selectRef"
            v-model="selectedValues[item.value]"
            filterable
            placeholder="Select"
            style="width: 240px"
            clearable
            highlight-current-row
            >
            <el-option
                v-for="i in item.options"
                :key="i.value"
                :label="i.value"
                :value="i.value"
            />
        </el-select>
    </div>
    <el-button type="primary" @click="searchFunc">Search</el-button>
  </div>
</template>

<script lang="ts" setup props="props" name="Search">
    import {onMounted, reactive, ref, watch} from 'vue'

    let selectedValues: any = ref({})
    let options:any = reactive({})

    onMounted(() => {
        props.searchItems.forEach(({label, value} : {label: string, value: string}) => {
            selectedValues.value[value] = ''
            options[value] = {}
        })
    })

    function searchFunc() {
        props.updateTable(selectedValues.value)
    }

    const props = defineProps(['searchItems', 'updateTable'])
</script>

<style scoped>
    .search {
        display: flex;
        justify-content: space-around;
    }

    .item{
        display: flex;
        justify-content: space-around;
    }
</style>